import React from 'react'
import classnames from 'classnames'
import { NavLink } from 'react-router-dom'
import { connect } from 'react-redux'
import './pad';

const mapStateToProps = (state) => {
  return {
    gameData: state.app.gameData
  }
}
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    // openCreateGame: (gameData) => dispatch(global.allActions.appActions.openCreateGame(gameData)),
  }
}
class BattlePad extends React.Component<any, any> {

  public constructor(props) {
    super(props)
    this.state = {
    }
  }

  public componentDidMount() {
    new Swiper('.battle-pad-pan', {
      // Optional parameters
      direction: 'horizontal',
      loop: false,
      pagination: {
        el: '.battle-pad-pagination',
      }
    })
  }


  public componentDidUpdate(){
    
  }

  public get pageListPaged() {
    return _.chunk(this.props.gameData, 10)
  }

  public componentWillUnmount() {
  }

  public render() {
    const { gameClicked } = this.props
    return (
      <div className="full relative">
        <div className="battle-pad-pan">
          <ul className="game-page-battle">
            {
              this.pageListPaged.map((pageData, index) => {
                return <li className="text-center">
                  <img src="img/battle/battle-di.png" className="full pos-abs battle-di" alt="" />
                  <div className="pure-g games-warpper">
                    {
                      pageData.map((gameData, indexGame) => {
                        const imgCname = classnames({
                          'game-icon-battle': true
                        })
                        const divCn = classnames({
                          'pure-u-1-2': true,
                          'pos-relative': true
                        })
                        const toLink = `/BattleDetail/${gameData.gameId}/${gameData.gameName}`
                        return <div className={divCn} key={index * 10 + indexGame}>
                          <img src="img/userCenter/yellows-btn.png" alt="" className={imgCname} />
                          <div className="underbg" onClick={() => gameClicked(gameData)}>
                            <span className="game-name-battle">{gameData.gameName}</span>
                          </div>
                        </div>
                      })
                    }
                  </div>
                </li>
              })
            }
          </ul>
        </div>
        <div className="battle-pad-pagination"></div>
      </div>
    )
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(BattlePad)